<template>
	<view class="address-container">
		<!-- 我的地址 -->
		<view class="content">
			<text class="section-title">我的地址</text>
			
			<!-- 地址列表 -->
			<view class="address-list">
				<view 
					class="address-item" 
					v-for="(address, index) in addressList" 
					:key="address.id"
					@click="selectAddress(address)">
					<view class="address-content">
						<view class="address-header">
							<text class="address-detail">{{ address.fullAddress }}</text>
							<view class="edit-btn" @click.stop="editAddress(address)">
								<u-icon name="edit-pen" size="24" color="#1976d2"></u-icon>
							</view>
						</view>
						<view class="address-info">
							<view class="contact-info">
								<view class="default-tag" v-if="address.isDefault">
									<text class="default-text">默认地址</text>
								</view>
								<text class="contact-detail">{{ address.phone }} {{ address.contactName }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 新增地址按钮 -->
		<view class="add-address-btn" @click="addNewAddress">
			<text class="add-text">+ 新增地址</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				addressList: [
					{
						id: 1,
						contactName: 'aaa',
						gender: 'male',
						phone: '18711389426',
						province: '广西壮族自治区',
						city: '柳州市',
						district: '鱼峰区',
						address: '柳州市第八中学南校区',
						houseNumber: '5584',
						fullAddress: '广西壮族自治区柳州市鱼峰区 柳州市第八中...',
						isDefault: true
					},
					{
						id: 2,
						contactName: '11',
						gender: 'female',
						phone: '15163672545',
						province: '河南省',
						city: '郑州市',
						district: '中原区',
						address: '郑州市中原区人民政府',
						houseNumber: '100',
						fullAddress: '河南省郑州市中原区 郑州市中原区人民政府',
						isDefault: false
					}
				],
				fromPage: '' // 来源页面，用于判断是选择地址还是管理地址
			}
		},
		onLoad(options) {
			this.fromPage = options.from || '';
			this.loadAddressList();
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			
			// 加载地址列表
			async loadAddressList() {
				try {
					// 模拟API调用
					// const response = await this.$http.get('/api/address/list');
					// this.addressList = response.data;
					console.log('加载地址列表');
				} catch (error) {
					console.error('加载地址列表失败:', error);
				}
			},
			
			// 选择地址（用于下单时选择收货地址）
			selectAddress(address) {
				if (this.fromPage === 'checkout') {
					// 如果是从结算页面来的，则选择地址后返回
					uni.$emit('addressSelected', address);
					uni.navigateBack();
				}
			},
			
			// 编辑地址
			editAddress(address) {
				// 将地址数据序列化后传递
				const addressData = encodeURIComponent(JSON.stringify(address));
				uni.navigateTo({
					url: `/pages/editAddress/editAddress?action=edit&addressData=${addressData}`
				});
			},
			
			// 新增地址
			addNewAddress() {
				uni.navigateTo({
					url: '/pages/newAddress/newAddress'
				});
			}
		}
	}
</script>

<style scoped>
	.address-container {
		background-color: #f8f9fa;
		min-height: 100vh;
	}

	/* 顶部导航栏 */
	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		background-color: #fff;
		border-bottom: 1rpx solid #eee;
	}

	.header-left {
		width: 60rpx;
	}

	.header-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.header-right {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.icon {
		font-size: 28rpx;
		color: #666;
	}

	.target-icon {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		border: 3rpx solid #333;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #333;
	}

	/* 内容区域 */
	.content {
		padding: 30rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 30rpx;
		display: block;
	}

	/* 地址列表 */
	.address-list {
		margin-bottom: 40rpx;
	}

	.address-item {
		background-color: #fff;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
		overflow: hidden;
	}

	.address-content {
		padding: 30rpx;
	}

	.address-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 20rpx;
	}

	.address-detail {
		font-size: 28rpx;
		color: #333;
		line-height: 1.4;
		flex: 1;
		margin-right: 20rpx;
	}

	.edit-btn {
		padding: 10rpx;
	}

	.address-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.contact-info {
		display: flex;
		align-items: center;
		gap: 15rpx;
	}

	.default-tag {
		background-color: #f0f0f0;
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
	}

	.default-text {
		font-size: 20rpx;
		color: #666;
	}

	.contact-detail {
		font-size: 24rpx;
		color: #666;
	}

	/* 新增地址按钮 */
	.add-address-btn {
		position: fixed;
		bottom: 50rpx;
		left: 50%;
		transform: translateX(-50%);
		background-color: #1976d2;
		padding: 25rpx 60rpx;
		border-radius: 50rpx;
		box-shadow: 0 8rpx 20rpx rgba(25, 118, 210, 0.3);
	}

	.add-text {
		color: #fff;
		font-size: 28rpx;
		font-weight: bold;
	}
</style>